<template>
  <div class="home">
    <div class="top">
      <el-row id="main" style="width: 400px; height: 300px"></el-row>
      <el-row id="ma" style="width: 400px; height: 370px"></el-row>
      <div class="load">
        <h3>服务统计</h3>
        <div class="finish">
          <span>已完成:84.22%</span>
        </div>
        <el-row id="Loading" style="width: 400px; height: 120px"></el-row>
      </div>
    </div>
    <div class="middle">
      <img src="@/assets/u59.png" alt="" />
      <div id="nana">
        <div class="one">
          <div class="content">
            <div class="topp">
              <div class="yq">园区总面积/m²</div>
              <div class="zl">总租赁面积/m²</div>
              <div class="zongzhi">园区总产值/万元</div>
              <div class="ruzhu">入驻企业总数/家</div>
            </div>
            <div class="mid">
              <div class="m1">7512</div>
              <div class="m2">6353</div>
              <div class="m3">75683</div>
              <div class="m4">274</div>
            </div>
            <el-row id="namain" style="width: 1000px; height: 220px"></el-row>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="two">
        <div class="text">
          <div class="title">泊车情况</div>
          <div class="box1">
            <div class="a">园区内总停车位</div>
            <div class="b">2232</div>
          </div>
          <div class="box2">
            <div class="c">已使用停车位</div>
            <div class="d">1028</div>
          </div>
        </div>
        <el-row id="namaintwo" style="width: 240px; height: 300px"></el-row>
      </div>

      <!-- lunbo -->
      <div class="lunbo">
        <div class="xinxi">实时车辆信息</div>
        <div class="single" v-for="(item, index) in 9" :key="index">
          <div class="box1">
            <div class="zuo">进场</div>
            <div class="che">苏A233JK</div>
            <div class="time">今天16:53</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
//1.导入echarts
import * as echarts from "echarts";
import { onMounted,onBeforeUnmount } from "vue";
var myChart:any = null;
onMounted(() => {
  //2.实例化echarts
  var main:any = document.getElementById("main");
  myChart = echarts.init(main);
  myChart.setOption({
    title: {
      //标题的设置

      left: "center",
    },

    legend: {
      //图例的设置
      top: 70,
    },
    xAxis: {
      data: ["在营", "已租", "出租", "续签", "新签", "待租", "退租"],
    },
    yAxis: {},
    series: [
      //数据系列
      {
        // name: '销量',
        type: "bar",
        data: [800, 280, 320, 450, 430, 800, 650],
        // showBackground: true,
        barWidth: "50", //柱状条宽度
        backgroundStyle: {},
        itemStyle: {
          //柱状条样式
          // borderRadius:40,	//圆角边框
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //颜色(渐变色)
            { offset: 0, color: "#3264b4" },
            // { offset: 0.5, color: '#188df0' },
            // { offset: 1, color: '#188df0' }
          ]),
        },
      },
    ],
  });
  myChart.setOption({
    title: {
      text: "当日能耗情况",
      textStyle: {
        color: "white",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    // 图例
    legend: {
      type: "plain",
      textStyle: {
        color: "#ccc",
      },
      top: 30,
      data: ["煤", "气", "油", "电", "热"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["0", "4", "8", "12", "18", "24"],
      },
    ],
    yAxis: [
      {
        type: "value",
        // boundaryGap: false,
        //坐标轴在 grid 区域中的分隔线
        splitLine: {
          show: false,
        },
        data: ["0", "180", "360", "540", "720", "900"],
      },
    ],
    series: [
      {
        name: "煤",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "气",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "油",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "电",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "热",
        type: "line",
        stack: "Total",
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        // data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  });
  var ma:any = document.getElementById("ma"); 
  myChart = echarts.init(ma);
  myChart.setOption({
    title: {
      // left: "center",
    },
    legend: {
      //图例的设置
      top: 70,
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1000 },
          // { value: 100},
          // { value: 800 },
          { value: 300 },
          { value: 700 },
          // { value: 300 }
        ],
      },
    ],
  });
   // 柱状图
   myChart.setOption({
    title: {
      text: "企业资质情况",
      textStyle: {
        color: "white",
      },
    },
    legend: {
      icon: "square",
      data: ["科技企业", "高新企业"],
      left: 60,
      top: 45,
      textStyle: {
        color: "white",
      },
    },
    tooltip: {
      trigger: "axis",
      // 坐标轴指示器
      axisPointer: {
        // 默认为直线'line'，可选为阴影'shadow'
        type: "shadow",
      },
    },
    // 网格
    grid: {
      // grid外的占比
      left: "3%",
      right: "4%",
      bottom: "3%",
      //grid 区域是否包含坐标轴的刻度标签
      containLabel: true,
    },
    xAxis: [
      {
        // 坐标轴轴线相关设置
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        //  splitLine{
        //   lineStyle:{
        //     color:'black'
        //   }
        // },
        type: "category",
        data: ["2015", "2016", "2017", "2018", "2019", "2020", "2021"],
        // 坐标轴刻度相关设置
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        // y轴坐标的字体颜色
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        //去掉与x轴平行的分割线:
        splitLine: {
          show: false,
        },
        type: "value",
        // 刻度标签的内容格式器
        // axisLable:{
        //   formatter:'{value}件'
        // }
      },
    ],
    series: [
      {
        name: "科技企业",
        // 柱状图
        type: "bar",
        //柱子宽度在item宽度的占比
        barWidth: "30%",
        data: [210, 202, 200, 334, 290, 330, 220],
      },
      {
        name: "高新企业",
        type: "bar",
        // //柱子宽度在item宽度的占比
        barWidth: "30%",
        data: [90, 152, 290, 184, 240, 210, 120],
        // 柱子颜色
        itemStyle: {
          color: "orange",
        },
      },
    ],
  });
  var Loading:any = document.getElementById("Loading")
  myChart = echarts.init(Loading);
   // 加载图
   var value = [0.4, 0.5, 0.6, 0.72, 0.88];
   myChart.setOption({
    // backgroundColor:"rgba(12, 34, 55, 0.698039215686274)",
    grid: {
      top: "15%",
      left: "5%",
      right: "15%",
      bottom: "13%",
    },
    tooltip: {
      show: false,
    },
    xAxis: {
      type: "value",
      min: 0,
      max: 1,
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(12, 34, 55, 0.698039215686274)",
          width: 1,
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "rgba(96,118,173,0.3)",
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      //show: false,
      type: "category",
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        margin: 0,
        align: "left",
        padding: [-50, 0, 0, 0],
        textStyle: {
          color: "#ffffff",
          fontSize: 16,
        },
      },
      axisTick: {
        show: false,
      },
      data: ["服务统计"],
    },
    series: [
      {
        //真实数值条形图
        name: "真实值",
        type: "bar", //pictorialBar
        barWidth: "50%",
        itemStyle: {
          borderWidth: 0,
          color: {
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#375cd6",
              },
              {
                offset: 1,
                color: "#375cd6",
              },
            ],
          },
          // barBorderRadius: 10,
        },
        label: {
          show: false,
        },
        data: value,
        z: 1,
      },
      {
        //辅助方格图形
        name: "辅助值",
        type: "pictorialBar",
        barWidth: "50%",
        symbol: "rect",
        symbolRepeat: "true",
        symbolMargin: "80%",
        symbolSize: ["20%", "100%"],
        symbolOffset: ["150%", "0%"],
        itemStyle: {
          color: "rgba(12, 34, 55, 0.698039215686274)",
          // barBorderRadius: 10,
        },
        label: {
          color: "#fff",
          show: false,
          position: ["100%", "10%"],
          fontSize: 18,
          formatter: function (params) {
            console.info(params);
            return " " + (value[params.dataIndex] * 100).toFixed(2) + "%";
          },
        },
        data: [1, 1, 1, 1, 1],
        z: 2,
      },
      {
        //辅助背景图形
        name: "背景条",
        type: "bar", //pictorialBar
        barWidth: "50%",
        barGap: "-100%",
        itemStyle: {
          borderWidth: 0,
          color: "white",
          // barBorderRadius: 10,
        },
        data: [1, 1, 1, 1, 1],
        z: 0,
      },
    ],
  });
  // nana
  var namain:any = document.getElementById("namain");
  myChart = echarts.init(namain);
   // na柱状图
   myChart.setOption({
    title: {
      //标题的设置
      left: "center",
    },
    legend: {
      //图例的设置
      top: 70,
    },
    xAxis: {
      data: ["在营", "已租", "出租", "续签", "新签", "待租", "退租"],
    },
    yAxis: {},
    series: [
      //数据系列
      {
        // name: '销量',
        type: "bar",
        data: [800, 280, 320, 450, 430, 800, 650],
        // showBackground: true,
        barWidth: "50", //柱状条宽度
        backgroundStyle: {},
        itemStyle: {
          //柱状条样式
          // borderRadius:40,	//圆角边框
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //颜色(渐变色)
            { offset: 0, color: "#3264b4" },
            // { offset: 0.5, color: '#188df0' },
            // { offset: 1, color: '#188df0' }
          ]),
        },
      },
    ],
  });
  var namaintwo:any = document.getElementById("namaintwo")
  myChart = echarts.init(namaintwo);
  myChart.setOption({
    title: {
      // left: "center",
    },
    legend: {
      //图例的设置
      top: 70,
    },
    graphic: {
      type: "text",
      left: "center",
      top: "45%",
      style: {
        text: "46%",
        textAlign: "center",
        fill: "#ffcc00",
        fontSize: 30,
        fontWeight: 700,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1000 },
          // { value: 100},
          // { value: 800 },
          { value: 300 },
          { value: 700 },
          // { value: 300 }
        ],
      },
    ],
  });
  //3.请求数据

  //4.绘图
});

onBeforeUnmount(()=>{
  myChart && myChart.clear();
  if (myChart != null) {
      myChart.dispose()
      myChart = null;
  }
  window.removeEventListener("resize", resize);
})
//页面改变重绘图表
var resize = ()=> myChart.resize();
window.addEventListener('resize',resize) 
</script>
<style scoped>
.two {
  display: flex;
}

.two .text {
  height: 200px;
}

.two .text .title {
  color: rgb(120, 113, 113);
  font-weight: bolder;
  font-size: 20px;
  border-bottom: 2px solid skyblue;
  padding: 5px 0;
}

.two .text .a {
  color: rgb(120, 113, 113);
  font-weight: bolder;
  font-size: 20px;
}

.two .text .c {
  color: rgb(120, 113, 113);
  font-weight: bolder;
  font-size: 20px;
}

.two .text .b {
  color: #3264b4;
  font-weight: bolder;
  font-size: 26px;
  padding: 5px 0;
}

.two .text .d {
  color: #ddba22;
  font-weight: bolder;
  font-size: 26px;
  padding: 5px 0;
}

.two .text .box1 {
  padding: 20px 0;
}

.one .content .topp {
  display: flex;
  justify-content: space-between;
  width: 700px;
  color: rgb(120, 113, 113);
  font-size: 20px;
  font-weight: bold;
}

.one .content .middle {
  display: flex;
  justify-content: space-between;
  width: 700px;
  padding: 10px 0;
  font-size: 24px;
  color: #3264b4;
  font-weight: bolder;
}

.one .content {
  width: 1010px;
}

.home {
  height: 100%;
  background-color: rgba(25, 39, 76, 0.913725490196078);
  overflow: hidden;
  display: flex;
  position: relative;
}

.top {
  border: rgba(121, 121, 121, 1);
  border-radius: 10px;
  width: 400px;
  height: 830px;
  margin: 15px;
  background-color: rgba(12, 34, 55, 0.698039215686274);
  border: 1px solid #9e9d9d;
}

.top #main {
  padding: 15px;
}

.top #ma {
  padding: 15px;
}

.load h3 {
  color: white;
  margin-left: 20px;
  font-size: 20px;
  font-weight: 700;
  /* color: #4c71eb; */
}

.finish span {
  margin: 20px;
  color: #ccc;
}

.middle {
  align-items: center;
  margin-top: 12px;
}

.middle img {
  height: 510px;
  margin-top: 8px;
}

/* 娜娜 */
.right {
  position: absolute;
  right: 00;
  top: 0;
  background-color: rgba(12, 34, 55, 0.698039215686274);
  border-radius: 10px;
  margin: 20px;
  border: 1px solid #9e9d9d;
}

.right .two {
  display: flex;
  width: 420px;
  margin-top: 20px;
}

.two .text {
  width: 140px;
  margin-left: 20px;
  margin-top: 20px;
}

.two .text .title {
  color: white;
  font-weight: bolder;
  font-size: 20px;
  padding: 5px 0;
}

.two .text .a {
  color: white;
  font-weight: bolder;
  font-size: 20px;
}

.two .text .c {
  color: white;
  font-weight: bolder;
  font-size: 20px;
}

.two .text .b {
  color: #3264b4;
  font-weight: bolder;
  font-size: 26px;
  padding: 5px 0;
}

.two .text .d {
  color: #ddba22;
  font-weight: bolder;
  font-size: 26px;
  padding: 5px 0;
}

.two .text .box1 {
  padding: 20px 0;
}

.one .content {
  border-radius: 10px;
  border: 1px solid #9e9d9d;
  background-color: rgba(12, 34, 55, 0.698039215686274);
  margin-top: 8px;
}

.one .content .topp {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  width: 100%;
  color: white;
  font-size: 20px;
  font-weight: bold;
  height: 50px;
}

.one .content .mid {
  display: flex;
  justify-content: space-around;
  font-size: 24px;
  color: #3264b4;
  font-weight: bolder;
}

#namain {
  margin: auto;
}

.lunbo .xinxi {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}

.lunbo .single .box1 {
  display: flex;
  justify-content: space-around;
}

.lunbo .single .box1 .che {
  padding: 16px 0;
  color: white;
  font-weight: bold;
}

.lunbo .single .box1 .zuo {
  border: 1px solid yellow;
  width: 70px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  margin-top: 15px;
  text-align: center;
  color: yellow;
}

.lunbo .single .box1 .time {
  padding: 16px 0;
  color: gray;
}
</style>
